<template>
  <div>
    姓名：{{ user.name }} <br />
    地址：{{ user.address.city }} {{ user.address.dist }} {{ user.address.detail }} <br />
    习惯：{{ user.work.hobby.fav }}

    <div>
      <el-button @click="changeAll">整体切换</el-button>
      <br />
      <el-button @click="changeName">切换name</el-button>
      <el-button @click="changeAddr">切换地址</el-button>
      <el-button @click="changeAddrDetail">切换地址详情</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
// let user = reactive({
let user = shallowReactive({
  name: '张三',
  address: {
    city: '北京',
    detail: '上坡',
    dist: '朝阳',
  },
  work: {
    hobby: {
      fav: 'play',
    },
  },
})
console.log('🚀 ~  ~ user: ', user)
console.log('reactive-user:', user)
console.log('reactive-user.address:', user.address)
console.log('reactive-user.work.hobby:', user.work.hobby)
const changeAll = () => {
  user = {
    name: '张三1',
    address: {
      city: '北京1',
      detail: '上坡1',
      dist: '朝阳1',
    },
    work: {
      hobby: {
        fav: 'play1',
      },
    },
  }
}
const changeName = () => {
  user.name = '李四'
}
const changeAddr = ()=>{
  user.address = {
    city: '北京1',
    detail: '上坡1',
    dist: '朝阳1',
  }
}
const changeAddrDetail = () => {
  user.address.dist = '昌平'
  user.work.hobby.fav = 'study'
}
</script>
<style scoped></style>
